<!-- 收货地址列表-新增 -->
<script setup>
	import {
		ref,
		reactive,
		nextTick
	} from 'vue'
	// import cityPicker from '@/uni_modules/piaoyi-cityPicker/components/piaoyi-cityPicker/piaoyi-cityPicker'
	import {
		editInfoApi,
		logOutApi
	} from '@/api/my/user.js'
	import {
		getCurrentInstance
	} from 'vue'
	const {
		appContext
	} = getCurrentInstance()


	import {
		onShow,
		onLoad,
		onReady
	} from '@dcloudio/uni-app'
	import {
		log
	} from 'console'
	// 数据
	const data = reactive({
		showPicker: false,
		defaultValue: '',
		// defaultValue: ['河北省','唐山市','丰南区'],
	})

	const cityPickerConfirm = (val) => {
		console.log(val)

		formDate.area = ' '
		nextTick(() => {
			formDate.area = val.name
			uFormRef.value.validateField('formDate.area');
		})
		data.showPicker = false;
	}






	// 表单校验规则
	const rules = {
		userName: [{
			required: true,
			message: '请输入用户名',
			trigger: 'blur',
		}, ],

		fanCount: [{
			required: true,
			message: '请输入粉丝数量',
			trigger: 'change',
		}, ],

		area: [{
			required: true,
			message: '请选择所在地区',
			trigger: 'blur',
		}, ],
		address: [{
				required: true,
				message: '请输入详细地址',
				trigger: 'blur',
			},
			{
				pattern: /^[a-zA-Z0-9\u4e00-\u9fa5]{2,50}$/,
				message: '长度需要2-50之间，不能包含特殊符号',
				trigger: 'blur',
			}
		],
	};
	// 表单引用  
	const uFormRef = ref(null);
	// 保存个人资料
	async function saveClick() {
		await uFormRef.value?.validate()
		editInfoApi(formDate).then(res => {
			console.log(res, 'res');
			uni.showToast({
				title: '支付成功',
				icon: 'none'
			})
			uni.navigateBack()
		})
	}

	// 退出登录
	const signOutClick = () => {
		logOutApi().then(res => {
			console.log(res, 'res');
			uni.showToast({
				title: '退出登录成功',
				icon: 'none',
				success: function(res) {
					uni.clearStorageSync()
				}
			})

			uni.navigateTo({
				url: '/pages/home/login'
			})

		})
	}


	// 点击头像触发click事件 changeUserPhoto

	const changeUserPhoto = () => {
		console.log('---');
		// let _this = this;
		uni.chooseImage({
			count: 1, //默认9
			sizeType: ["original", "compressed"], //可以指定是原图还是压缩图，默认二者都有
			sourceType: ["album", "camera"], //从相册选择或者打开相机
			success: function(res) {
				console.log(res, 'res');
				uni.uploadFile({
					// url: `${Config.baseURL}jz-fileserver/api/v1/attachs?relationType=profile`,
					url: 'http://192.168.1.9:9999/file/upload',
					filePath: res.tempFilePaths[0],
					// file:res,
					name: "file",
					formData: {
						'user': 'test'
					},
					success: uploadFileRes => {
						console.log(uploadFileRes, 'uploadFileRes');
						console.log(JSON.parse(uploadFileRes.data), 'res');
						formDate.fileList3 = JSON.parse(uploadFileRes.data).data.url
						// 根据返回的uploadFileRes.data做操作，往下逻辑要怎么写关键还是要看后端如何处理。就当前逻辑该上传接口返回的是图片需要的一个ID，
						// 该方法是通过将uploadFileRes.data中的某个值传参给后端，后端返回ArrayBuffer对象，最后在专程Base64字符串
						// _this.showPhoto(uploadFileRes.data)
					}
				});
			}
		});

	}


	const confirm = (event) => {

		// formDate.birthday = timestampToDateBasic(event.value)
		formDate.birthday = uni.$u.timeFormat(event.value, 'yyyy-mm-dd')
		console.log(formDate.birthday, 'formDate.birthdayss');
		// console.log(timestampToDateBasic(event.value), '==='); // 示例时间戳
	}

	const timestampToDateBasic = (timestamp) => {
		let date = new Date(parseInt(timestamp)),
			y = date.getFullYear(),
			m = date.getMonth() + 1,
			d = date.getDate()
		if (m > 9) {
			m = m
		} else {
			m = "0" + m
		}
		if (d > 9) {
			d = d
		} else {
			d = "0" + d
		}
		return "" + y + "-" + m + "-" + d

	}



	// 默认生日
	const value1 = ref('');
	// 响应式表单数据
	const formDate = reactive({
		userName: '',
		phone: '',
		oxygenID: '',
		sex: '',

		fileList3: '',
		birthday: '',
	})

	onLoad((option) => {
		if (option) {
			console.log(option, 'option')
			console.log(JSON.parse(option.userInfo))
			let huixian = JSON.parse(option.userInfo)

			formDate.fileList3 = huixian.avatar
			formDate.birthday = huixian.birthday
			formDate.userName = huixian.userName
			formDate.phone = huixian.phone
			formDate.sex = huixian.sex
			formDate.desc = huixian.desc
			formDate.oxygenID = huixian.userId
		}
	})






	const radiolist = reactive([{
			name: '男',
			value: 1,
		},
		{
			name: '女',
			value: 0,
		},
	]);


	const maskClick = (e) => {
		console.log('maskClick事件:', e);
	}


	// 定义方法  
	function valChange(e) {
		// console.log('当前值为: ' + e.target.value);
	}
	const formatter = (type, value) => {
		if (type === 'year') {
			return `${value}年`;
		}
		if (type === 'month') {
			return `${value}月`;
		}
		if (type === 'day') {
			return `${value}日`;
		}
		return value;
	};

	const datetimePickerRef = ref(null);

	const showSex = ref(false);
	const columns = reactive([
		['中国', '美国', '日本']
	]);






	// 定义方法  
	function sexSelect(e) {
		// console.log('e: ', e);
		formDate.sex = e.name;
		// if (formRef.value) {
		// 	formRef.value.validateField('userInfo.sex');
		// }
	}

	const sexClick = () => {
		showSex.value = true
		console.log('sexClick: ', showSex.value);
	}
</script>

<template>
	<view class="address-add-page">
		<!-- 表单 -->
		<view class="form-box">
			<up-form labelPosition="left" :model="formDate" :rules="rules" ref="uFormRef" labelWidth="70">
				<up-form-item label="头像" prop="avatar">
					<u-avatar :src="formDate.fileList3" shape="circle" @click="changeUserPhoto"></u-avatar>
				</up-form-item>
				<up-form-item label="用户名" prop="userName">
					<up-input v-model="formDate.userName" placeholder="请输入用户名" placeholderStyle="color:#C8C9CD"
						border="surround"></up-input>
				</up-form-item>
				<up-form-item label="生日" prop="birthday">
					<uni-datetime-picker type="date" :clear-icon="false" v-model="formDate.birthday"
						@maskClick="maskClick" />
				</up-form-item>
				<up-form-item label="氧气ID">
					<up-input v-model="formDate.oxygenID" readonly placeholder="请输入手机号码"
						placeholderStyle="color:#C8C9CD" border="surround">
					</up-input>
				</up-form-item>

				<up-form-item label="手机号码">
					<up-input v-model="formDate.phone" readonly placeholder="请输入手机号码" placeholderStyle="color:#C8C9CD"
						border="surround">
					</up-input>
				</up-form-item>

				<up-form-item label="性别" @click="sexClick">
					<up-radio-group v-model="formDate.sex" inactiveColor="#D9D9D9" activeColor="#25D62E">
						<up-radio :customStyle="{ marginBottom: '32rpx',marginLeft: '12rpx' }"
							v-for="(item, index) in radiolist" :key="index" :label="item.name" :name="item.value">
						</up-radio>
					</up-radio-group>
				</up-form-item>

				<up-form-item label="个人说明" prop="desc">
					<up-textarea v-model="formDate.desc" placeholder="请输入个人说明" placeholderStyle="color:#C8C9CD"
						border="surround"></up-textarea>
				</up-form-item>

				<up-form-item label="退出登录" @click="signOutClick">

				</up-form-item>


			</up-form>
		</view>


		<view class="bottom-bar">
			<view class="content">
				<up-button text="保存" color="#303133" :disabled="false" shape="circle" @click="saveClick"></up-button>

			</view>
		</view>

	</view>
</template>

<style lang="scss" scoped>
	.address-add-page {
		box-sizing: border-box;
		padding-bottom: 182rpx;
		min-height: 100vh;
		background-color: #F9F9F9;

		// 表单
		& .form-box {
			margin-top: 16rpx;
			padding: 0 32rpx;
			padding-bottom: 32rpx;
			background: #FFFFFF;

			&::v-deep .u-form {
				& .u-form-item__body__left__content__label {
					font-weight: 400;
					font-size: 28rpx;
					color: #929397;
				}

				& .u-input {
					background: #FAFAFA;
					border: none;
					border-radius: 8rpx !important;

					& .area-code {
						font-weight: 400;
						font-size: 24rpx;
						color: #929397;
					}
				}
			}
		}

		// 底部栏
		& .bottom-bar {
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100vw;
			height: 172rpx;
			background: #FFFFFF;
			border-top: 1rpx solid #E9E9EB;

			&::v-deep .content {
				box-sizing: border-box;
				padding: 12rpx 40rpx;

				& .u-button {
					height: 88rpx;
					font-weight: 500;
					font-size: 32rpx;
					color: #FFFFFF;
					// background: #FFA618;
					border-radius: 112rpx;
					border: none;
				}
			}
		}
	}
</style>